<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="pragrma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="expires" content="0" />
		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />

		<title></title>
		<script>
			window.addEventListener(
				'mousewheel',
				function (event) {
					if (event.ctrlKey === true || event.metaKey) {
						event.preventDefault()
					}
				},
				{ passive: false }
			)
			function calculateFontSize(baseResolution, maxResolution, baseFontSize, zoomFactor) {
				// 解构分辨率对象，获取宽度和高度
				const { width: baseWidth, height: baseHeight } = baseResolution
				const { width: maxWidth, height: maxHeight } = maxResolution

				// 计算当前分辨率与基础分辨率的比值
				const widthRatio = maxWidth / baseWidth
				const heightRatio = maxHeight / baseHeight
				const resolutionRatio = Math.min(widthRatio, heightRatio)
				console.log(resolutionRatio) // 输出分辨率比值
				console.log(zoomFactor) // 输出放大倍率
				// 计算最终字体大小
				const finalFontSize = baseFontSize * resolutionRatio

				return finalFontSize
			}
			function setFontSize() {
				const baseResolution = { width: 1920, height: 1080 }
				const maxResolution = { width: window.screen.width, height: window.screen.height }
				let fontSize = 12
				if (window.screen.width <= 1920) {
					fontSize = 12
				} else if (window.screen.width > 1920 && window.screen.width <= 2560) {
					fontSize = 16
				}
				// const baseFontSize = 12
				// const zoomFactor = window.devicePixelRatio
				// const fontSize = calculateFontSize(baseResolution, maxResolution, baseFontSize, zoomFactor)
				//设置Html元素的字体大小
				document.documentElement.style.fontSize = fontSize + 'px'
			}
			//监听分辨率的变化
			window.addEventListener('resize', setFontSize)
			setFontSize()
		</script>
	</head>
	<body>
		<noscript>
			<strong>We're sorry but iDaas doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
		</noscript>
		<div id="app"></div>
		<script>
			function handleColorSchemeChange(e) {
				if (e.matches) {
					// 系统启用了暗黑模式
					document.documentElement.setAttribute('data-theme', 'dark')
				} else {
					// 系统没有启用暗黑模式
					document.documentElement.setAttribute('data-theme', 'light')
				}
			}
			const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
			darkModeMediaQuery.addEventListener('change', handleColorSchemeChange)
			handleColorSchemeChange(darkModeMediaQuery)
		</script>
	</body>
</html>
